<template>
	<el-radio-group class="show_mode_wrapper" :style="{ '--showSize': size + 'px' }" v-model="showMode">
		<el-radio-button label="1"><i class="iconfont icon-sw-image-text"></i></el-radio-button>
		<el-radio-button label="2"><i class="iconfont icon-sw-list-block"></i></el-radio-button>
	</el-radio-group>
</template>

<script>
export default {
	name: 'showMode',
	props: {
		value: {
			type: String,
			default: '1'
		},
		size: {
			type: String,
			default: '24'
		}
	},
	data() {
		return {
			showMode: this.value
		};
	},
	watch: {
		value(val) {
			this.showMode = val;
		},
		showMode(val) {
			this.$emit('input', val);
		}
	}
};
</script>

<style lang="scss" scoped>
.show_mode_wrapper::v-deep {
	.el-radio-button {
		width: var(--showSize);
		height: var(--showSize);
	}
	.el-radio-button__inner {
		padding: 0;
		width: 100%;
		height: 100%;
		display: flex;
		border-radius: 0;
		align-items: center;
		justify-content: center;
	}
	.iconfont {
		font-size: calc(var(--showSize) * 0.6);
	}
}
</style>
